<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>侦听器与计算属性的练习</title>
</head>
<body>
    <div id="app">
        {{message}}<br>
        {{reverse}}<br>
      {{reverseMessage}}  
    </div>


    <script src="./lib/vue.js"></script>

    <script>
    const vm= new Vue({
        el:'#app',
        data:{
            message:'爱你永不变',
            reverse:''
        },
        watch:{//侦听器，监视某个数据的变化，有该数据的变化引起其他操作的发生（数据改变或副作用操作）
            message(newMessage){//简写
                this.reverse=newMessage.split('').reverse().join('')
            }
        },
        //正规写法
        /* 
          // message: {
        //   handler(newMessage) { // 处理程序
        //     this.reverse = newMessage.split('').reverse().join('')
        //   },
        //   immediate: true
        // }
         */
         computed:{//计算属性，不包含副作用操作
         /* 副作用操作：即异步操作（例如：ajax请求） */
            reverseMessage(){//简写
                 console.log('computed.......')
                 return this.message.split('').reverse().join('') 
              }
         }
    })
    
    
    
    </script>
</body>
</html>